<template>
  <div class="header">
    <div class="header-left">
      <div class="header-logo">
        <img src="/logo2_80.png" alt="">
      </div>
      <horizontal-expand><span :class="['title',{'isCollapse': stores().theme.isCollapse}]"
                               v-show="!stores().theme.isCollapse">{{i18n(env('project_name'))}}</span>
      </horizontal-expand>
      <el-icon @click="stores().theme.isCollapse = !stores().theme.isCollapse">
        <i class="fa-solid fa-indent" v-if="stores().theme.isCollapse"></i>
        <i class="fa-solid fa-outdent" v-else></i>
      </el-icon>
    </div>
    <div class="header-right">
      <span class="user-name">{{ stores().user.userInfo?.sysUser?.name }}</span>
      <setting></setting>
    </div>
  </div>
</template>

<script setup lang="ts">

import {stores} from "@/base/stores";
import HorizontalExpand from "@/base/views/component/horizontal-expand.vue";
import Setting from "@/base/views/layout1/setting.vue";
import {i18n} from "@/base/ts/service/I18nService.ts";
import {env} from "@/base/ts/utils/env.ts";
</script>

<style scoped lang="scss">
.header {
  display: flex;
  justify-content: space-between;
  height: var(--layout1-heder-height);
  background-color: var(--layout1-header-bg);
  align-items: center;

  .header-left {
    display: flex;
    align-items: center;

    .header-logo {
      width: 65px;
      display: flex;
      justify-content: center;
      align-items: center;

      img {
        width: calc(var(--layout1-heder-height) * 0.6);
        height: calc(var(--layout1-heder-height) * 0.6);
      }
    }

    .title {
      width: 135px;
      color: white;
      font-size: 18px;
    }

    .title.isCollapse {
      color: transparent;
    }

    .el-icon {
      color: white;
      font-size: 20px;
    }
  }

  .header-right {
    display: flex;
    align-items: center;
    padding-right: 20px;

    .user-name {
      color: white;
      font-size: 14px;
    }
  }
}
</style>